<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="searchParam.prodName"
            size="mini"
            placeholder="商品名称模糊查询"
            clearable
          />
        </el-form-item>
        <el-form-item label="编号">
          <el-input
            v-model="searchParam.code"
            size="mini"
            placeholder="编号模糊查询"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchParam.status" size="mini" placeholder="请选择" clearable>
            <el-option label="待商户审核" value="0"/>
            <el-option label="待平台审核" value="1"/>
            <el-option label="商户驳回" value="2"/>
            <el-option label="平台驳回" value="3"/>
            <el-option label="寄售中" value="4"/>
            <el-option label="已出售" value="5"/>
            <el-option label="用户下架" value="6"/>
            <el-option label="已取消" value="7"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-date-picker
            v-model="searchParam.createTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核通过时间：">
          <el-date-picker
            v-model="searchParam.auditTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model="searchParam.userId"
            size="mini"
            placeholder="寄售用户ID"
            clearable
          />
        </el-form-item>
        <el-form-item label="审核类型">
          <el-select v-model="searchParam.auditType" size="mini" placeholder="请选择" clearable>
            <el-option label="自动审核" value="0"/>
            <el-option label="人工审核" value="1"/>
            <el-option label="免审核" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="getPage()"
          >查询
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="() => {this.searchParam = {}, this.pageQuery = {pageSize: 10,pageNum: 1}, this.getPage()}"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
      <!-- <el-button size="mini" icon="el-icon-search" class="filter-item" @click="getPage()">{{ $t('table.search') }}</el-button> -->
      <el-button size="mini" icon="el-icon-finished" type="primary" class="filter-item" @click="batchAudit()">批量审核
      </el-button>
    </div>

    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      style="width: 100%;"
    >
      <el-table-column
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column label="商品名称" prop="prodName" align="center">
        <template slot-scope="{row}">
          <span>{{ row.prodName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编号" prop="code" align="center">
        <template slot-scope="{row}">
          <span>{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄售用户" prop="userName" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄售用户ID" prop="userId" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄售价格（元）" prop="price" align="center" width="130">
        <template slot-scope="{row}">
          <a @click="getProdConfig(row.prodId)">{{ (row.price / 100).toFixed(2) }}</a>
        </template>
      </el-table-column>
      <el-table-column label="商户审核类型" prop="shopAuditType" align="center" width="130">
        <template slot-scope="{row}">
          <el-tag v-if="row.shopAuditType === 0" size="small" type="warning">自动审核</el-tag>
          <el-tag v-if="row.shopAuditType === 1" size="small" type="danger">人工审核</el-tag>
          <el-tag v-if="row.shopAuditType === 2" size="small" type="info">免审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="平台审核类型" prop="auditType" align="center" width="130">
        <template slot-scope="{row}">
          <el-tag v-if="row.auditType === 0" size="small" type="warning">自动审核</el-tag>
          <el-tag v-if="row.auditType === 1" size="small" type="danger">人工审核</el-tag>
          <el-tag v-if="row.auditType === 2" size="small" type="info">免审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="createTime" align="center" width="160">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center" width="120">
        <template slot-scope="{row}">
          <el-tag v-if="row.status === 0" size="small" type="warning">待商户审核</el-tag>
          <el-tag v-if="row.status === 1" size="small" type="warning">待平台审核</el-tag>
          <el-tag v-if="row.status === 2" size="small" type="danger">商户驳回</el-tag>
          <el-tag v-if="row.status === 3" size="small" type="danger">平台驳回</el-tag>
          <el-tag v-if="row.status === 4" size="small">寄售中</el-tag>
          <el-tag v-if="row.status === 5" size="small" type="success">已出售</el-tag>
          <el-tag v-if="row.status === 6" size="small" type="info">用户下架</el-tag>
          <el-tag v-if="row.status === 7" size="small" type="info">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核通过时间" prop="auditTime" align="center" width="160">
        <template slot-scope="{row}">
          <span>{{ row.auditTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width"
                       fixed="right">
        <template slot-scope="{row}">
          <el-button
            v-if="row.auditType === 1 && row.status === 1"
            type="primary"
            size="mini"
            plain
            round
            @click="enableOrDisable(row,1)"
          >通过
          </el-button>
          <el-button
            v-if="row.auditType === 1 && row.status === 1"
            type="danger"
            size="mini"
            plain
            round
            @click="enableOrDisable(row,2)"
          >驳回
          </el-button>
          <el-button v-if="(row.shopAuditType != 2 || row.auditType != 2) && row.status > 0" type="text"
                     @click="auditRecords(row.id)">
            审核记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageQuery.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageQuery.pageSize"
      :total="pageVO.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 寄售列表详情 -->
    <consign-list v-if="consignListVisible" ref="consignList" @refreshDataList="getPage()"/>
    <!-- 审核记录 -->
    <audit-record v-if="auditRecordVisible" ref="auditRecord" @refreshDataList="getPage()"/>

    <el-dialog
      title="批量审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="reason" type="textarea" :rows="2" maxlength="80" show-word-limit placeholder="请输入审核原因"/>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          size="mini"
          plain
          round
          @click="auditSubmit(2)">驳 回</el-button>
        <el-button
          type="primary"
          size="mini"
          plain
          round
          @click="auditSubmit(1)">通 过</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import ConsignList from './consign-list'
import AuditRecord from './audit-record'

export default {
  name: '',
  components: {ConsignList, AuditRecord},
  data () {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      // loading
      pageLoading: true,
      // 查询参数
      searchParam: {},
      // addOrUpdateVisible: false,
      consignListVisible: false,
      auditRecordVisible: false,
      selected: [],
      dialogVisible: false,
      reason: null
    }
  },
  mounted () {
    this.getPage()
  },
  methods: {

    handleSizeChange (val) {
      this.pageQuery.pageSize = val
      this.getPage()
    },
    handleCurrentChange (val) {
      this.pageQuery.pageNum = val
      this.getPage()
    },
    getPage () {
      if (this.searchParam.userId) {
        var regPos = /^[0-9]\d*$/
        if (!regPos.test(this.searchParam.userId)) {
          this.$message({
            message: '用户ID只可输入数字',
            type: 'error',
            duration: 1500
          })
          return
        }
      }
      this.pageLoading = true
      this.$http({
        url: this.$http.adornUrl('/admin/consign/situation/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({...this.pageQuery, ...this.searchParam}
          )
        )
      }).then(({data}) => {
        this.pageLoading = false
        this.pageVO.list = data.list
        this.pageVO.total = data.total
      })
    },
    /**
     * 批量审核
     */
    batchAudit () {
      if (this.selected.length === 0) {
        this.$message({
          message: '请选择要审核的寄售商品',
          type: 'error',
          duration: 1200
        })
        return
      }
      this.dialogVisible = true
    },
    auditSubmit (sta) {
      if (sta === 2 && !this.reason) {
        this.$message({
          message: '请填写驳回原因！',
          type: 'error',
          duration: 1200
        })
        return
      }
      var data = {}
      data.consignIds = this.selected
      data.status = sta
      data.auditReason = this.reason
      this.$http({
        url: this.$http.adornUrl('/admin/consign/situation/batchAudit'),
        method: 'post',
        data: this.$http.adornData(data)
      }).then(async ({ data }) => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.dialogVisible = false
            this.reason = null
            this.getPage()
          }
        })
      })
    },
    handleClose () {
      this.reason = null
      this.dialogVisible = false
    },
    // deleteHandle () {
    //   this.$confirm(this.$t('table.sureToDelete'), this.$t('table.tips'), {
    //     confirmButtonText: this.$t('table.confirm'),
    //     cancelButtonText: this.$t('table.cancel'),
    //     type: 'warning'
    //   }).then(() => this.deleteById())
    // },
    // deleteById () {
    //   api.deleteById().then(() => {
    //     this.$message({
    //       message: '操作成功',
    //       type: 'success',
    //       duration: 1500,
    //       onClose: () => this.getPage()
    //     })
    //   })
    // },
    handleSelectionChange (val) {
      this.selected = val.map(item => item.id)
    },
    getConsignList (row) {
      this.consignListVisible = true
      this.$nextTick(() => {
        this.$refs.consignList.init(row)
      })
    },
    auditRecords (row) {
      this.auditRecordVisible = true
      this.$nextTick(() => {
        this.$refs.auditRecord.init(row)
      })
    },
    getProdConfig (prodId) {

      this.$http({
        url: this.$http.adornUrl('/admin/consign/situation/getByProdId'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              prodId: prodId
            },
            this.theData
          )
        )
      }).then(({ data }) => {
        var lowPrice = (data.lowPrice / 100).toFixed(2)
        var highPrice = (data.highPrice / 100).toFixed(2)
        var statusHtml = data.status === 1 ? '<span style="color: #ff0000">关闭</span>' : '<span style="color: #2ccc00">开启</span>'
        var html = '<div>' +
          '        <div>' +
          '        状态：' + statusHtml +
          '        </div>' +
          '        <div>' +
          '          可委托售卖最低价（元）：<span style="color: #0063cc">' + lowPrice + '</span>' +
          '        </div>' +
          '        <div>' +
          '          可委托售卖最高价（元）：<span style="color: #cc0000">' + highPrice + '</span>' +
          '        </div></div>'
        this.$alert(html, '当前藏品寄售参考价', {
          dangerouslyUseHTMLString: true
        })
      })
    },
    /**
     * 驳回/通过
     */
    enableOrDisable (row, sts) {
      var tit = '请输入' + (sts === 2 ? '驳回' : '通过') + '原因'
      this.$prompt(tit, '寄售审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        if (sts === 2 && !value) {
          this.$message({
            message: '请填写驳回原因！',
            type: 'error',
            duration: 1200
          })
          return
        }
        var data = {}
        data.id = row.id
        data.status = sts
        data.auditReason = value
        this.$http({
          url: this.$http.adornUrl('/shop/consign/situation/audit'),
          method: 'post',
          data: this.$http.adornData(data)
        }).then(async ({ data }) => {
          this.$message({
            type: 'success',
            message: (sts === 2 ? '驳回' : '通过') + '成功',
            duration: 1500,
            onClose: () => this.getPage()
          })
        })
      }).catch(() => {
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .brand-logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
  }
}
</style>
